{% extends 'base.html' %}
{% load gallery_tags %}

{% block content %}
  <!-- Hero Section Begin -->
  {% get_gallery %}

  <!-- Categories Section Begin -->
  <section class="categories spad">
{#    <div class="container">#}
{#      <div class="row">#}
{#        <div class="col-lg-3 col-md-6 col-sm-6">#}
{#          <div class="categories__item set-bg" data-setbg="img/categories/cat-1.jpg">#}
{#            <div class="categories__hover__text">#}
{#              <h5>Dinner</h5>#}
{#              <p>28 articles</p>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}
{#        <div class="col-lg-3 col-md-6 col-sm-6">#}
{#          <div class="categories__item set-bg" data-setbg="img/categories/cat-2.jpg">#}
{#            <div class="categories__hover__text">#}
{#              <h5>Dinner</h5>#}
{#              <p>28 articles</p>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}
{#        <div class="col-lg-3 col-md-6 col-sm-6">#}
{#          <div class="categories__item set-bg" data-setbg="img/categories/cat-3.jpg">#}
{#            <div class="categories__hover__text">#}
{#              <h5>Dinner</h5>#}
{#              <p>28 articles</p>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}
{#        <div class="col-lg-3 col-md-6 col-sm-6">#}
{#          <div class="categories__item set-bg" data-setbg="img/categories/cat-4.jpg">#}
{#            <div class="categories__hover__text">#}
{#              <h5>Dinner</h5>#}
{#              <p>28 articles</p>#}
{#            </div>#}
{#          </div>#}
{#        </div>#}
{#      </div>#}
{#    </div>#}
    <div class="categories__post">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-8">
            {% for post in post_list %}
                {% if forloop.first %}
                  <div class="categories__post__item categories__post__item--large">
                    <div class="categories__post__item__pic set-bg"
                         data-setbg="{{ post.image.url }}">
                      <div class="post__meta">
                        <h4>{{ post.create_at|date:"d" }}</h4>
                        <span>{{ post.create_at|date:"M" }}</span>
                      </div>
                    </div>
                    <div class="categories__post__item__text">
                      <ul class="post__label--large">
                        <li>{{ post.category }}</li>
                      </ul>
                      <h3><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h3>
                      <ul class="post__widget">
                        <li>by <span>{{ post.author }}</span></li>
                        <li>3 min read</li>
                        <li>20 Comment</li>
                      </ul>
                      <p>{{ post.text|slice:":250" }}</p>
                      <a href="{{ post.get_absolute_url }}" class="primary-btn">Read more</a>
                    </div>
                  </div>
                  <div class="row">
                {% endif %}
            {% endfor %}
                <div class="col-lg-6 col-md-6 col-sm-6">
                  {% for post in post_list %}
                      {% if forloop.counter <= 5 and  forloop.counter > 1 %}
                        <div class="categories__post__item">
                          <div class="categories__post__item__pic small__item set-bg"
                               data-setbg="{{ post.image.url }}">
                            <div class="post__meta">
                              <h4>{{ post.create_at|date:"d" }}</h4>
                              <span>{{ post.create_at|date:"M" }}</span>
                            </div>
                          </div>
                          <div class="categories__post__item__text">
                            <span class="post__label">{{ post.category }}</span>
                            <h3><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h3>
                            <ul class="post__widget">
                              <li>by <span>{{ post.author }}</span></li>
                              <li>3 min read</li>
                              <li>20 Comment</li>
                            </ul>
                            <p>{{ post.text|slice:":250" }}</p>
                          </div>
                        </div>
                      {% endif %}
                  {% endfor %}
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6">
                  {% for post in post_list %}
                    {% if forloop.counter > 5 %}
                      <div class="categories__post__item">
                        <div class="categories__post__item__pic small__item set-bg"
                             data-setbg="{{ post.image.url }}">
                          <div class="post__meta">
                            <h4>{{ post.create_at|date:"d" }}</h4>
                            <span>{{ post.create_at|date:"M" }}</span>
                          </div>
                        </div>
                        <div class="categories__post__item__text">
                          <span class="post__label">{{ post.category }}</span>
                          <h3><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h3>
                          <ul class="post__widget">
                            <li>by <span>{{ post.author }}</span></li>
                            <li>3 min read</li>
                            <li>20 Comment</li>
                          </ul>
                          <p>{{ post.text|slice:":250" }}</p>
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}
                </div>
              </div>


            <div class="col-lg-12 text-center">
              <div class="load__more__btn">
                <a href="#">Load more</a>
              </div>
            </div>
          </div>
          {% include 'blog/include/sidebar.html' %}
        </div>
      </div>
    </div>
  </section>
  <!-- Categories Section End -->

{% endblock content %}
